<template>
	<view class="diy-banner-box"
		:class="itemData?.style?.imgShape || 'square'"
		:style="'background-color:'+itemData?.style?.background+';'">
		<swiper
			class="swiper"
			:autoplay="autoplay"
			:interval="interval"
			:duration="duration"
			@change="changeSwiper"
			:style="{ height: `${itemData.style.height}rpx`}">
			<swiper-item v-for="(item,index) in itemData.data" :key="index">
				<view class="diy-banner-item" @click="clickBanner(item)">
					<image mode="aspectFill" :src="item.imgUrl"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="swiper-dots main-flex" :class="itemData.style.btnShape">
			<view
				:class="current==index?'swiper-dot active':'swiper-dot'"
				v-for="(item,index) in itemData.data"
				:style="current==index?'background-color:'+indicatorActiveColor+';':''" :key="index">
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				indicatorActiveColor: '#ffffff',
				current: 0
			}
		},
		props: ['itemData'],
		created() {
			this.interval = this.itemData.params.interval;
			this.indicatorActiveColor = this.itemData.style.btnColor;
		},
		methods: {
			changeSwiper(e) {
				this.current = e.detail.current;
			},
			/*跳转页面*/
			clickBanner(e) {
				this.gotoPage(e?.name)
			}
		}
	}
</script>

<style lang="scss">
	.diy-banner-box{
		position: relative;
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		.swiper {
			width: 100%;
		}
		.diy-banner-item {
			height: 100%;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}
		&.round{
			.diy-banner-item {
				border-radius: 12rpx;
				image {
					border-radius: 12rpx;
				}
			}
		}
		.swiper-dots {
			position: absolute;
			width: 100%;
			justify-content: center;
			left: 0;
			bottom: 40rpx;
			.swiper-dot {
				width: 14rpx;
				height: 14rpx;
				margin: 0 4px;
				background: #ebedf0;
				opacity: 0.3;
			}
			&.round .swiper-dot {
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
			}
			&.rectangle .swiper-dot {
				width: 40rpx;
				height: 6rpx;
				border-radius: 4rpx;
			}
			.active {
				opacity: 1;
			}
		}
	}
</style>
